<style>
  /* 新增样式部分 */
  .container {
      max-width: 1200px;
      margin: 40px auto;
      padding: 30px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  .main_left {
      text-align: center;
      margin-bottom: 30px;
  }
  
  .main_left p:first-child {
      font-size: 24px;
      color: #333;
      margin-bottom: 8px;
  }
  
  .main_left p:last-child {
      font-size: 16px;
      color: #666;
      letter-spacing: 2px;
  }
  
  .rg_form table {
      width: 100%;
      border-collapse: collapse;
  }
  
  .td_left {
      width: 30%;
      padding: 15px 20px;
      text-align: right;
      font-size: 14px;
      color: #666;
  }
  
  .td_right {
      padding: 10px 20px;
  }
  
  input[type="text"],
  input[type="password"],
  input[type="email"],
  select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
  }
  
  input:focus, select:focus {
      border-color: #191D3A;
      outline: none;
  }
  
  .error {
      display: block;
      font-size: 12px;
      color: #e4393c;
      margin-top: 5px;
  }
  
  input[type="radio"],
  input[type="checkbox"] {
      margin-right: 8px;
  }
  
  input[type="radio"] + label,
  input[type="checkbox"] + label {
      margin-right: 20px;
      font-size: 14px;
  }
  
  #td_sub {
      text-align: center;
      padding-top: 20px;
  }
  
  #btn_sub {
      background: #FFD700;
      color: #191D3A;
      padding: 12px 40px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
  }
  
  #btn_sub:hover {
      background: #FFC000;
  }
  
  .main_right {
      text-align: center;
      margin-top: 20px;
      color: #666;
  }
  
  .main_right a {
      color: #191D3A;
      text-decoration: none;
      margin-left: 8px;
  }
  
  .main_right a:hover {
      text-decoration: underline;
  }
  
  /* 调整布局 */
  .main_center {
      width: 60%;
      margin: 0 auto;
  }
  
  /* 新增单选/多选框样式 */
  .td_right > label {
      display: inline-block;
      line-height: 30px;
  }
  
  /* 下拉菜单样式 */
  select {
      appearance: none;
      background: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>") no-repeat right 10px center/12px;
  }
  </style>
  
  <div class="container">
    <div class="main_left">
      <p>新用户注册</p>
      <p>USER REGISTER</p>
    </div>
    
    <div class="main_center">
      <div class="rg_form">
        <form action="#" id="form" method="get">
          <table>
            <!-- 用户名 -->
            <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                <input type="text" name="username" id="username" placeholder="请输入用户名">
                <span id="s_username" class="error">用户名为3-10位，字母、数字和下划线</span>
              </td>
            </tr>
  
            <!-- 密码 -->
            <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class="td_right">
                <input type="password" name="password" id="password" placeholder="请输入密码">
                <span id="s_password" class="error">密码为6-9位，字母、数字和下划线</span>
              </td>
            </tr>
  
            <!-- Email -->
            <tr>
              <td class="td_left"><label for="email">Email</label></td>
              <td class="td_right">
                <input type="email" name="email" id="email" placeholder="请输入邮箱">
                <span id="s_email" class="error"></span>
              </td>
            </tr>
  
            <!-- 性别 -->
            <tr>
              <td class="td_left"><label>性别</label></td>
              <td class="td_right">
                <input type="radio" name="gender" id="male" value="male" checked>
                <label for="male">男</label>
                <input type="radio" name="gender" id="female" value="female">
                <label for="female">女</label>
              </td>
            </tr>
  
            <!-- 擅长的技术 -->
            <tr>
              <td class="td_left"><label>擅长的技术</label></td>
              <td class="td_right">
                <input type="checkbox" name="tec" id="html" value="HTML" checked>
                <label for="html">HTML</label>
                <input type="checkbox" name="tec" id="css" value="CSS">
                <label for="css">CSS</label>
                <input type="checkbox" name="tec" id="js" value="JS">
                <label for="js">JS</label>
              </td>
            </tr>
  
            <!-- 工作地点 -->
            <tr>
              <td class="td_left"><label>工作地点</label></td>
              <td class="td_right">
                <select name="loc">
                  <option>太原</option>
                  <option>上海</option>
                  <option>天津</option>
                </select>
              </td>
            </tr>
  
            <!-- 注册按钮 -->
            <tr>
              <td colspan="2" id="td_sub">
                <input type="submit" id="btn_sub" value="注册">
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  
    <div class="main_right">
      <p>已有账号?<a href="#">立即登录</a></p>
    </div>

    <script>
        window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                return checkUsername() && checkPassword() && checkEmail() && checkGender() && checkSkills() && checkLocation();
            };
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;
            document.getElementById("email").onblur = checkEmail;
        };  
    
        function checkUsername(){
            var username = document.getElementById("username").value;
            var reg_username = /^\w{3,10}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "输入正确";
            }else{
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }
    
        function checkPassword(){
            var password = document.getElementById("password").value;
            var reg_password = /^\w{6,9}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag){
                s_password.innerHTML = "输入正确";
            }else{
                s_password.innerHTML = "密码格式有误";
            }
            return flag;
        }
    
        function checkEmail(){
            var email = document.getElementById("email").value;
            var reg_email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            var flag = reg_email.test(email);
            var s_email = document.getElementById("s_email");
            if(flag){
                s_email.innerHTML = "输入正确";
            }else{
                s_email.innerHTML = "邮箱格式有误";
            }
            return flag;
        }
    
 
    </script>
  </div>